<template>
    <!-- 分享邀请码图片（包含二维码） -->
    <div id="uni-share">
<!--        <div class="tab_bnt cont_between">-->
<!--            <div class="left" @click='change_img("prev")'>-->
<!--                <image src="/static/left_icon.png" class="img_one" mode="scaleToFill"></image>-->
<!--            </div>-->
<!--            <div class="right" @click='change_img("next")'>-->
<!--                <image src="/static/right_icon.png" class="img_one" mode="scaleToFill"></image>-->
<!--            </div>-->
<!--        </div>-->
        <div class="post">
            <div class="wrapper" >
                <canvas style="width: 100%;height:100%;" canvas-id="firstCanvas"></canvas>
            </div>
        </div>
        <div class="btn_sub cont_around">
            <span class="save" @click="qr_base()">保存图片</span>
<!--                <span class="share" @click="open_circle()">分享海报</span>-->
        </div>
        <!--蒙版-->
        <div class="mb_popup" @click="open_circle()" v-if="popupVisible"></div>
        <section class="mui-content" v-if="popupVisible">
            <div class="cont_box">
                <div class="cont_all cont_start">
                    <div class="cont_column cont_center">
                        <image src="/static/img/wx_logo.png" mode="scaleToFill" class="image_one" @click="open_share()"></image>
                        <p>微信好友</p>
                    </div>
                    <div class="cont_column cont_center">
                        <image src="/static/img/wx-circle.png" mode="scaleToFill" class="image_one" @click="open_Timeline()"></image>
                        <p>微信朋友圈</p>
                    </div>
                </div>
                <div class="btn_cle" @click="open_circle()">取消</div>
            </div>
        </section>
    </div>
</template>

<script>
    import QR from '@/js_sdk/Sansnn-uQRCode/wxqrcode.js'
    export default {
        components: {
            QR
        },
        name: "invitation",
        data(){
            return{
                base64 : '',
                base64_url : '',
                // myqrcode_img_id : uni.getStorageSync('myqrcode_img_id'),
                index : 1,
                popupVisible:false,
                type:uni.getStorageSync('type_data'),
                userCode:uni.getStorageSync('user_code'),
                name:uni.getStorageSync('name'),
                screenHeight:'',
                name_tit:'',
            }
        },
        onReady: function() {
            var that = this;
            that.open_init();
        },
        onShow:function(){
            this.init();
            if(this.name.length == 3){
                this.name_tit = this.name.substr(0,1)+"**"+this.name.substr(3);
            }else if(this.name.length == 2){
                this.name_tit = this.name.substr(0,1)+"*"+this.name.substr(3);
            }else if(this.name.length == 4){
                this.name_tit = this.name.substr(0,1)+"***"+this.name.substr(4);
            }
            // this.name_tit = this.name;
        },
        onLoad(option) {},
        methods:{
            toast(msg) {
                uni.showToast({
                    title: msg,
                    position: 'bottom',
                    duration: 2000,
                    icon:'none',
                });
            },
            init(){
                var str = 'http://lijiaren.web.lishuaba.com/#/?type='+this.type+"&userCode="+this.userCode;
                this.base64_url = QR.createQrCodeImg(str,{})
            },
            open_init(){
                var inviteCode = this.base64_url;
                //获取手机设备的信息
                var system_info = uni.getSystemInfoSync();
                var context = uni.createCanvasContext('firstCanvas');
                context.drawImage( '/static/back_img1.png',system_info.screenWidth/900,system_info.screenHeight/900,system_info.screenWidth/1,system_info.screenHeight*0.95);
                context.drawImage(inviteCode,system_info.screenWidth/3, system_info.screenHeight*0.578, system_info.screenWidth/2.8, system_info.screenWidth/2.8);

                context.font = "16px Arial";
                context.fillStyle="#fff";
                context.fillText( this.name_tit, system_info.screenWidth/2.10,system_info.screenHeight*0.51);
                context.font = "16px Arial";
                context.fillStyle="#fff";
                context.fillText('邀请码：'+ this.userCode, system_info.screenWidth/2.90,system_info.screenHeight*0.55);
                context.draw();
            },
            open_circle(){
                var that = this;
                that.popupVisible = !that.popupVisible;
            },
            qr_base() {
                var that = this;
                uni.showLoading({
                    title: '保存中...'
                });
                uni.canvasToTempFilePath({
                    fileType:'jpg',
                    canvasId: 'firstCanvas',
                    success: function(res) {
                        // console.log(res);
                        uni.saveImageToPhotosAlbum({
                            filePath: res.tempFilePath,
                            success: function() {
                                that.toast(res.tempFilePath);
                                uni.showToast({
                                    title: '已经保存到相册',
                                    icon: 'none'
                                });
                            }
                        });
                    },
                    fail: function(error) {
                        console.log(JSON.stringify(error));
                        uni.hideLoading()
                    }
                })
            },
            open_share() {
                var that = this;
                uni.canvasToTempFilePath({
                    fileType:'jpg',
                    canvasId: 'firstCanvas',
                    success: function(res) {
                        // that.toast(res.tempFilePath);
                        uni.share({
                            provider: "weixin",
                            scene: "WXSceneSession",
                            type: 2,
                            imageUrl: res.tempFilePath,
                            success: function (res) {
                                uni.showToast({
                                    title: '分享成功',
                                    icon: 'none'
                                });
                            },
                            fail: function (err) {
                                uni.showToast({
                                    title: '分享失败',
                                    icon: 'none'
                                });
                            }
                        });
                    }
                })
            },
            open_Timeline() {
                var that = this;
                uni.canvasToTempFilePath({
                    fileType:'jpg',
                    canvasId: 'firstCanvas',
                    success: function(res) {
                        // console.log(res);
                        uni.share({
                            provider: "weixin",
                            scene: "WXSenceTimeline",
                            type: 2,
                            imageUrl: res.tempFilePath,
                            success: function (res) {
                                uni.showToast({
                                    title: '分享成功',
                                    icon: 'none'
                                });
                            },
                            fail: function (err) {
                                uni.showToast({
                                    title: '分享失败',
                                    icon: 'none'
                                });
                            }
                        });
                    }
                })
            },
            // change_img(direction){
            //     var that = this;
            //     if(direction == 'prev'){
            //         if(that.index > 1){
            //             that.index -= 1;
            //             that.myqrcode_img_id = that.index;
            //         }else{
            //             return false
            //         }
            //     }else if(direction == 'next'){
            //         if(that.index < 2){
            //             that.index += 1;
            //             that.myqrcode_img_id = that.index;
            //         }else{
            //             return false
            //         }
            //     }
            //     uni.setStorageSync('myqrcode_img_id',that.myqrcode_img_id);
            //     that.open_init();
            // },
        },
        created() {
        },
        onNavigationBarButtonTap(e){
            var that = this;
            that.popupVisible = !that.popupVisible;
        },
    }
</script>

<style>page {font-size: 14px;background-color: #ebddf8;}</style>
<style scoped lang="less">
    @import "../../public/public.less";
    .btn_sub{
        width: 100vw;
        font-size: 14px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        span{
            width: 100vw;
            height: 44px;
            line-height: 44px;
            display: block;
            color: #ffffff;
            text-align: center;
            border: none;
        }
        .save{
            width: 100%;
            background: #4831b0;
        }
        .share{
            background: #484bff;
        }
    }
    .mb_popup{
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        opacity: .5;
        background: #000;
        z-index: 1;
    }
    .cont_box{
        width: 90%;
        position: fixed;
        left: 5%;
        right: 5%;
        bottom: 3%;
        z-index: 9;
        text-align: center;
        .cont_all{
            width: 100%;
            border-radius: 8px;
            background: #fff;
            div{
                margin: 15px;
                p{margin-bottom:0;color: #333;font-size: 13px}
            }
            .image_one{
                width: 80upx;
                height: 80upx;
                margin-bottom: 5px;
            }
        }
        .btn_cle{
            width: 100%;
            box-sizing: border-box;
            background: #fff;
            border-radius: 8px;
            padding: 10px;
            margin-top: 15px;
        }
    }
    .tab_bnt {
        position: fixed;
        top: 38%;
        right: 40px;
        left: 32px;
        z-index: 99;
        div{
            .img_one{
                width: 30px;
                height: 60px;
            }
        }
    }
    .wrapper {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        &.left{
            transform: translateX(960upx);
            &.show {
                transform: translateX(150upx);
            }

        }

        &.right{
            transform: translateX(-960upx);
            &.show {
                transform: translateX(0);
            }

        }
    }
    /* #ifdef H5 */
    .wrapper {
        padding-top: 44px;
        padding-bottom: 44px;
        box-sizing: border-box;
    }
    /* #endif */
</style>
